<template>
  <div class="page-min">
    <div class="page-banner">
      <div style="display: inline-block">
        <span :style="{display: showHeader ? '' : 'none', marginRight: '50px'}">项目名称：{{projectName}}</span>
        <span :style="{display: showHeader ? '' : 'none', marginRight: '50px'}">日期：{{projectDate}}</span>
      </div>
      <el-button
              type="primary"
              @click="btnBack"
      >返回</el-button>
    </div>
    <div class="page-table">
      <el-table
          max-height="720"
          :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          border
          :header-cell-style="{background:'#F0F1F6',color:'#333'}"
          style="width: 100%;">
        <el-table-column
                type="index"
                label="序号">
        </el-table-column>
        <el-table-column
                prop="userName"
                label="人员名称">
        </el-table-column>
        <el-table-column
                prop="actualProfitTotal"
                label="提成金额">
        </el-table-column>

      </el-table>
    </div>
    <el-pagination
            style="float: right; margin-right: 50px; margin-top: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
    </el-pagination>
  </div>
</template>

<script>
  import { profitPersonList } from "@/api/report"

  export default {
    created() {
      this.getList()
    },
    data() {
      return {
        tableData:[],
        showHeader:false,
        projectDate: '',
        projectName: '',
        currentPage:1,
        pageSize:10,
        total:0
      }
    },
    methods: {
      btnBack(){
        window.history.go(-1)
      },
      getList(){
        // 从表单详情跳转过来
        if (this.$route.query.projectId){
          this.projectDate = this.$route.query.projectDate
          this.projectName = this.$route.query.projectName
          this.showHeader = true
          profitPersonList({projectId:this.$route.query.projectId}).then((r) => {
            if (r.code !== 200) {
              this.$message.error(r?.msg)
              this.tableData=[]
            }
            else {
              if (r.rows.length){
                this.tableData = r.rows
                this.total = r.total
              }else {
                this.tableData=[]
              }
            }
          })
        }
        else {
          this.showHeader = false
          profitPersonList({page:1,pageSize:10,data:{}}).then((r) => {
            if (r.code !== 200) {
              this.$message.error(r?.msg)
              this.tableData=[]
            }
            else {
              if (r.rows.length){
                this.tableData = r.rows
                this.total = r.total
              }else {
                this.tableData=[]
              }
            }
          })
        }
      },
      handleSizeChange(size){
        this.pageSize = size
      },
      handleCurrentChange(current){
        this.currentPage = current
      },
    }
  }
</script>

<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
}
.page-banner{
  margin-bottom: 10px;
}
</style>